<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<style>
			form {
				margin-top: 100px;
			}
		</style>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
	</head>

	<body>
		<div id="app">
			<form id="login-form" class="form-horizontal col-md-offset-4 col-lg-offset-4col-xl-offset-4">
				<div class="form-group">
					<label class="col-sm-2 control-label">用户名</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" placeholder="请输入用户名" name="userName" v-model="userName">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">密码</label>
					<div class="col-sm-3">
						<input type="password" class="form-control" placeholder="请输入密码" name="userPwd" v-model="userPwd">
					</div>
				</div>
				<div class="form-group form-inline">
					<label class="col-sm-2 control-label">验证码</label>
					<div class="col-sm-6">
						<input type="text" class="form-control form-inline" placeholder="请输入验证码" name="validateCode" v-model="validateCode">
						<img id="codeImage" width="100px" height="34px" :src="validateCodeImage" @click="changeValidateCode" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">
						<input type="checkbox" name="autoLogin" v-model="autoLogin">七天内免登录
					</label>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-10">
						<button id="login" type="button" class="btn btn-primary" @click="login">登录</button>
						<a href="regist.html">新用户注册</a>
					</div>
				</div>
			</form>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					userName: "",
					userPwd: "",
					validateCode: "",
					validateCodeImage: "",
					autoLogin: false
				}
			},
			methods: {
				//刷新验证码
				refreshValidateCode() {
					var _this = this;
					let codeImagePath = serverPath + "/validateCode";
					_this.validateCodeImage = codeImagePath + "?r_=" + new Date().getTime()
				},
				//刷新验证码
				changeValidateCode() {
					var _this = this;
					_this.refreshValidateCode();
				},
				//登录
				login() {
					var _this = this;
					let userName = _this.userName;
					let userPwd = _this.userPwd;
					let validateCode = _this.validateCode;
					if (userName.trim().length == 0 || userPwd.trim().length == 0) {
						alert("用户名或密码不能为空");
						return;
					}
					if (validateCode.trim().length == 0) {
						alert("验证码不能为空");
						return;
					}
					axios.post("/users/login", {
						userName: userName,
						userPwd: userPwd,
						validateCode: validateCode,
						autoLogin: _this.autoLogin ? 1 : 0
					}, _this.formSubmitConfig).then(function(res) {
						var data = res.data;
						if (data.success) {
							location.href = "cars_search.html";
						} else {
							alert(data.errMsg);
						}
					});

				}
			},
			mounted() {
				var _this = this;
				//第一次进入页面加载验证码
				_this.refreshValidateCode();
				//为该页面条件自动登录的逻辑，其它页面也可以实现这个逻辑，这里就先以该页面为准
				//即每次访问该页面时，先去根据Cookie中的内容来进行自动登录，如果登录成功，直接跳转到
				//搜索页面，否则在该页面中进行手动登录
				axios.post("/users/autoLogin").then(function(res) {
					let data = res.data;
					if (data.success&&data.data) {
						location.href = "cars_search.html";
					} else {
						console.log("此时就需要手动登录了...");
					}
				});
			}
		});
	</script>
</html>
